<template>
  <div>
    <el-dialog
      class="base-dialog"
      :custom-class="'panna-dialog_small'"
      :append-to-body="true"
      :visible="innerDialogFormVisible"
      :before-close="closedDialog"
      @closed="closedDialog"
    >
      <p>新用户首次登录,请先修改密码</p>
      <br /><br /><br />
      <el-form
        ref="formData"
        class="base-pipeline-layout"
        :model="formData"
        :rules="formDataRules"
        status-icon
        label-width="110px"
      >
        <el-form-item
          label="新密码"
          prop="newPassword"
          :error="errorMsg.newPassword"
          style="width: 100%"
        >
          <el-row>
            <el-col :span="20">
              <el-input
                :key="passwordType"
                ref="newPassword"
                v-model="formData.newPassword"
                :type="passwordType"
              ></el-input>
            </el-col>
            <el-col :span="4">
              <span @click="showPwd">
                <svg-icon
                  :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'"
                />
              </span>
            </el-col>
          </el-row>
        </el-form-item>

        <el-form-item
          label="确认密码"
          prop="confirmPassword"
          style="width: 100%"
        >
          <el-row>
            <el-col :span="20">
              <el-input
                v-model="formData.confirmPassword"
                type="password"
              ></el-input> </el-col
          ></el-row>
        </el-form-item>
      </el-form>

      <span slot="footer" class="base-dialog-footer">
        <el-button type="primary" @click="onSubmit()">保 存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { validatePass } from "@/utils/validate";
import { updatePassword } from "@/api/user";
export default {
  name: "ChangePasswordDialog",
  props: {
    dialogFormVisible: {
      type: Boolean,
      default: false,
    },
    oldPassword: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      passwordType: "password",
      innerDialogFormVisible: false,
      formData: {
        newPassword: "",
        confirmPassword: "",
      },
      errorMsg: {
        newPassword: "",
        confirmPassword: "",
      },
      formDataRules: {
        newPassword: [
          {
            required: true,
            trigger: "blur",
            validator: this.Helper.validateFunction,
          },
          { required: true, validator: validatePass, trigger: "blur" },
        ],
        confirmPassword: [
          { required: true, message: "请再次输入密码" },
          { validator: this.checkPwd, trigger: "blur" },
          { required: true, validator: validatePass, trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.innerDialogFormVisible = this.dialogFormVisible;
  },
  methods: {
    showPwd() {
      if (this.passwordType === "password") {
        this.passwordType = "";
      } else {
        this.passwordType = "password";
      }
      this.$nextTick(() => {
        this.$refs.newPassword.focus();
      });
    },

    // 校验二次密码
    checkPwd(rule, value, callback) {
      if (value.length < 15) {
        callback(new Error("密码必须大于15个字符"));
      } else if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.formData.newPassword) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    },
    closedDialog() {
      this.innerDialogFormVisible = false;
      this.$store.commit("user/SET_FIRST_LOGIN_STATUS", -1);
      this.$emit("update:dialogFormVisible", false);
      this.$emit("closeChangPassword");
    },
    onSubmit() {
      this.$refs.formData.validate((valid) => {
        if (valid) {
          updatePassword({
            oldpassword: this.oldPassword,
            password: this.formData.newPassword,
          }).then((res) => {
            this.closedDialog();
          });
        }
      });
    },
  },
};
</script>
